<template>
	<view class="wap">
		<view class="head flex-y-center flex-x-center">
			<view class="title" :class="index == tabIndex ? 'active':''" v-for="(item,index) in tabList" :key="index"
				@tap="chageTab(index)">{{item}}</view>
			<!-- 	<view class="title">兑换记录</view> -->
		</view>

		<view class="head-list" v-for="(item,index) in data.data_list" :key="index">
			<view class="list-left flex-bet">
				<view>{{item.order_no}}</view>
				<view>{{item.status_text}}</view>
			</view>
			<block>
				<view class="list-next flex-y-center">
					<image :src="item.store.image">
					</image>
					<view class="list-right">
						<view>{{item.store.name}}</view>
						<block v-if="item.is_vip==1">
							<view>返现门槛：¥{{item.vip_pay_fee}}</view>
							<view>返现金额：¥{{item.vip_cash_back}}</view>
						</block>
						<block v-if="item.is_vip==0">
							<view>返现门槛：¥{{item.pay_fee}}</view>
							<view>返现金额：¥{{item.cash_back}}</view>
						</block>
					</view>
				</view>
				<view class="list-bottom">评鉴规则：{{item.activity.rule}}</view>
			</block>
			
			<!-- <view class="list-bottom list-expire" v-if="item.status=='1'">
				<text>上传截止：</text>
				<text class="amount">00</text>
				<text>日</text>
				<text class="amount">19</text>
				<text>时</text>
				<text class="amount">18</text>
				<text>分</text>
				<text class="amount">49</text>
				<text>秒</text>
			</view> -->
			<view class="list-button-region flex-x-end">
				<block v-if="item.type=='sign'">
					<view class="list-button list-button-text" @click="cancel(item.id,'sign')" v-if="item.status==0||item.status==1">取消报名</view>
				</block>
				<block v-if="item.type=='vip'">
					<view class="list-button list-button-text" @click="cancel(item.id,'vip')" v-if="item.status==0">取消订单</view>
				</block>
				<view class="list-button list-button-upload" @click="repay(item.id)" v-if="item.status==0">立即支付</view>
				<view class="list-button list-button-upload" @click="upload(item.id)" v-if="item.status==1">上传凭证</view>
				<view class="list-button list-button-upload" @click="upload(item.id)" v-if="item.status==2||item.status==3">撤回凭证</view>
				<view @click="gotoWaiMai(item.activity.platform,item.store.name)" v-if="item.status==1 && item.activity.platform=='eleme'">
					<view  class="list-button list-button-text-elm flex-bet">
						<image src="@/static/img/elm-logo-ico.png" style="width: 18px; height: 18px;">
						</image>
						<text>复制店名</text>
						<image src="@/static/img/bulejt.png" style="width: 30rpx;height: 30rpx;"></image>
					</view>
				</view>
				<view @click="gotoWaiMai(item.activity.platform,item.store.meituan_url)" v-if="item.status==1 && item.activity.platform=='meituan'">
					<view class="list-button list-button-text-meituan flex-bet">
						<image src="@/static/img/mt-logo-ico.png" style="width: 17px; height: 17px;">
						</image>
						<text>进店下单</text>
						<image src="@/static/img/yellowjt.png" style="width: 30rpx;height: 30rpx;"></image>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="data.no_list" class="bottom-text">暂无数据</view>
		<view class="bottom-text" v-if="!data.no_list&&data.no_more">我也是有底线的~</view>
		<view class="bottom-text" style="color: #888;" v-if="!data.no_list&&!data.no_more">
					 加载中...
		</view>
		<!---->
	<my-kefu></my-kefu>
		</view>
	</template>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
		import myKefu from '../../pages/publicService/publicService.vue';
	import {getOrderList,ordercancel,repay} from '../../apirequest/api.js';
	export default {
		data() {
			return {
				tabIndex: 0,
				tabList: ['全部', '已取消', '待上传', '审核中', '未通过', '待入帐', '已完成'],
				data:{
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				},
				lock:0,
			}
		},
		onLoad() {
			
		},
		mounted() {
		    if (window.location.href.indexOf("?#") < 0) {
		      window.location.href = window.location.href.replace("#", "?#");
		    }
		},
		onShow() {
			this.data = {
				data_list: [],
				no_list: !1,
				no_more: !1,
				current_page: 0,
				loading_more: !0,
			}
		    this.loadDataList();
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function (t) {
			var o = this;
			o.loadDataList(function () {
			  o.data.loading_more = !0;
			});
		},
		methods: {
			callpay:function(){
				let that = this;
			    if (typeof WeixinJSBridge == "undefined") {
			        if (document.addEventListener) {
			            document.addEventListener('WeixinJSBridgeReady', that.jsApiCall(), false);
			        } else if (document.attachEvent) {
			            document.attachEvent('WeixinJSBridgeReady', that.jsApiCall());
			            document.attachEvent('onWeixinJSBridgeReady', that.jsApiCall());
			        }
			    } else {
			        that.jsApiCall();
			    }
			},
			
			jsApiCall: function(){
				let that = this;
				let payParam = that.payParam;
				
			    WeixinJSBridge.invoke(
			        'getBrandWCPayRequest', {
			            appId: payParam.appId,
			            nonceStr: payParam.nonceStr,
			            package: payParam.package,
			            signType: payParam.signType,
			            timeStamp: payParam.timeStamp,
			            paySign: payParam.paySign
			        },
			        function (res) {
			            if (res.err_msg == "get_brand_wcpay_request:ok") {
							uni.showToast({
								title:'支付成功',
								icon:"success"
							});
							setTimeout(function(){
								 that.data = {
								 	data_list: [],
								 	no_list: !1,
								 	no_more: !1,
								 	current_page: 0,
								 	loading_more: !0,
								 }
								 that.loadDataList();
							},1000);
			            } else {
			                WeixinJSBridge.log(res.err_msg);
							uni.showToast({
								title:'支付失败',
								icon:"error"
							});
							that.lock = 0;			
			            }
			        }
			    );
			},
			upload(id) {
				uni.navigateTo({
					url: '/pages/uploadVoucher/index?id='+id
				})
			},
			gotoWaiMai: function(platform,name) {
				if (platform=='meituan') {
					if (name) {
						window.location.href = name;
					} else {
						uni.showToast({
							title:'暂无链接地址',
							icon:"error"
						});
					}
				} else {//饿了么复制店名
					uni.setClipboardData({
						data:name,
						success() {
							uni.showToast({
								title:'复制成功',
								icon:"success"
							});
						}
					});
				}
			},
			
			//订单支付
			repay(id){
				var that = this;
				if (that.lock==1) {
					return;
				}
				that.lock = 1;
				repay({id:id}).then((res) => {
					if(res.code == 1){
						that.payParam = res.data.wx;
						that.callpay();
					}else{
						uni.showToast({
							title:res.msg,
							icon:"error"
						});
						that.lock = 0;
					}
				}).catch(err => {
					console.log(err)
				});
					
			},
			//取消订单
			cancel(id,type){
				var that = this;
				uni.showModal({
					title:'提示',
					content:type=='sign'?'确定取消报名吗?':'确定取消订单吗?',
					success(ret) {
						if(ret.confirm){
							ordercancel({id:id}).then((res) => {
								if(res.code == 1){
									uni.showToast({
										title:res.msg,
										icon:'success'
									});
									setTimeout(function(){
										that.data = {
											data_list: [],
											no_list: !1,
											no_more: !1,
											current_page: 0,
											loading_more: !0,
										}
										that.loadDataList();
									 },1000);

								}else{
									uni.showToast({
										title:res.msg,
										icon:'error'
									})
								}
							})
						}
						if(ret.cancel){
							
						}
					}
				})
					
			},
			chageTab(index) {
				this.tabIndex = index;
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				}
				this.loadDataList();
			},
			//获取数据列表
			 loadDataList: function (f) {
				var o = this;
				if (o.lock) {
					return;
				}
				if (o.data.no_list || o.data.no_more) "function" == typeof t && f();
				else {
				  var page = (o.data.current_page || 0) + 1;
				  var data = {
					page: page,
					current:this.tabIndex
				  }
				  o.lock = 1;
				  console.log(o.lock)
				  getOrderList(data).then((t) => {
					if(t.code == 1){
						  if (1 == t.data.current_page && !t.data.data.length) {
							  o.data.no_list= !0;
							  o.data.loading_more= !1
						  }
						 if (t.data.data && t.data.data.length) {
							 o.data.data_list = o.data.data_list || [];
							 o.data.data_list = o.data.data_list.concat(t.data.data), 
							 o.data.current_page= page;
						 }	
						 if (!t.data.has_more) {
							 o.data.no_more= !0;
						 }						  
						 
					}else{
						uni.showToast({
							title:'网络繁忙',
							icon:'error'
						})
					}
					o.lock = 0;
				  });
				}
			 },
		}
	}
</script>

<style>
	.wap .head {
		background: #fff;
		height: 100rpx;
		justify-content: space-around
	}

	.wap .head .title {
		font-size: 30rpx;
		;
		color: #bec1c7
	}

	.wap .head .active {
    font-size: 34rpx;
		color: #ff8546;
		font-weight: 700
	}

	.wap .head-list {
		margin: 9px 14px;
		border-radius: 9px;
		background-color: #fff;
		padding: 15px;
	}

	.wap .head-list .list-left view:nth-child(1) {
		color: #bec1c7;
		font-size: 24rpx;
    box-sizing: border-box;
	}

	.wap .head-list .list-left view:nth-child(2) {
		color: #eb2622;
		font-size: 12px
	}

	.wap .head-list .list-next {
		margin-top: 10px;
		padding-bottom: 7px;
		border-bottom: 1px solid #f4f5f7
	}

	.wap .head-list .list-next image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 7px;
    flex-shrink: 0;
	}

	.wap .head-list .list-next .list-right {
		flex: 1;
		margin-left: 10px
	}

	.wap .head-list .list-next .list-right view:nth-child(1) {
		color: #333;
		font-size: 34rpx;
		;
		font-weight: 700
	}

	.wap .head-list .list-next .list-right view:nth-child(2) {
		color: #999;
		font-size: 24rpx;
		margin-top: 4px
	}

	.wap .head-list .list-next .list-right view:nth-child(3) {
		color: #999;
		font-size: 24rpx;
		margin-top: 4px
	}

	.wap .head-list .list-bottom {
		color: #999;
		font-size: 24rpx;
		padding: 7px 0;
		border-bottom: 1px solid #f4f5f7
	}

	.wap .head-list .list-expire {
		color: #333;
		font-size: 28rpx;
		font-weight: 700
	}

	.wap .head-list .list-expire .amount {
		font-size: 30rpx;
		color: #eb2622;
		margin: 0 2px
	}

	.wap .head-list .list-button-region {
		margin-top: 7px
	}

	.wap .head-list .list-button-region .list-button-more {
		color: #ebebeb;
		font-size: 24rpx
	}

	.wap .head-list .list-button-region .list-button-more .list-button-list {
		width: 96px;
		background-color: #fff;
		display: flex;
		flex-flow: column
	}

	.wap .head-list .list-button-region .list-button {
		margin-left: 7px
	}

	.wap .head-list .list-button-region .list-button-text {
		border: 1px solid #bec1c7;
		color: #333;
		font-size: 12px;
		border-radius: 17px;
		padding: 4px 14px
	}

	.wap .head-list .list-button-region .list-button-text-meituan {
		width: 87px;
		border: 1px solid #fecb4e;
		color: #fecb4e;
		font-size: 12px;
		border-radius: 17px;
		padding: 4px 4px
	}

	.wap .head-list .list-button-region .list-button-text-elm {
		width: 87px;
		border: 1px solid #00a9e9;
		color: #00a9e9;
		font-size: 12px;
		border-radius: 17px;
		padding: 4px 4px
	}

	.wap .head-list .list-button-region .list-button-upload {
		background: #ff8546;
		color: #fff;
		font-size: 12px;
		border-radius: 17px;
		padding: 4px 14px
	}

	.wap .head-list .list-button-region .list-button-image {
		width: 87px;
		height: 28px
	}

	.wap .head-list .list-button-region .list-button-image image {
		width: 87px;
		height: 28px
	}
</style>
